<template>
    <div>
        <!-- 对数据操作  -->
        <div class="tool-rows">
            <el-input v-model="name" placeholder="请输入文件名" class="table-input" suffix-icon="el-icon-user"></el-input>
            <el-input v-model="uploader" placeholder="请输入上传者" class="table-input" suffix-icon="el-icon-s-custom"></el-input>
            <el-button type="success" icon="el-icon-search" @click="load">搜索</el-button>
            <el-button type="warning" icon="el-icon-refresh-right" @click="reset">重置</el-button>
        </div>
        <div class="tool-rows">
            <el-button type="success" icon="el-icon-upload2" @click="handleUpload">上传</el-button>
            <el-popconfirm
                    confirm-button-text='确定'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    icon-color="red"
                    v-show="user.role === 'USER_ADMIN'"
                    @confirm="handleBatchDelete"
                    title="确定删除选中文件吗?">
                <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin: 0 10px">批量删除</el-button>
            </el-popconfirm>
        </div>

        <!-- 表单区域  -->
        <el-table :data="tableData" header-cell-class-name="table-header" border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="50">
            </el-table-column>
            <el-table-column prop="name" label="文件名称" width="365">
            </el-table-column>
            <el-table-column prop="type" label="文件类型">
            </el-table-column>
            <el-table-column prop="size" label="文件大小(KB)">
            </el-table-column>
            <el-table-column prop="uploader" label="上传者">
            </el-table-column>
            <el-table-column prop="operation" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="success" icon="el-icon-edit" @click="handleDetail(scope.row.id)">查看详情</el-button>
                    <el-popconfirm
                            confirm-button-text='确认'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            v-show="user.role === 'USER_ADMIN' || scope.row.uploader === user.userName"
                            @confirm="handleDelete(scope.row.id)"
                            title="确定删除该文件吗?">
                        <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin-left: 6px">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页条  -->
        <div class="tool-rows">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNumber"
                    :page-sizes="[5, 10, 15]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!-- 在此输入文件描述  -->
        <el-dialog title="文件上传" :visible.sync="dialogFormVisible" width="30%" custom-class="edit-dialog">
            <el-form :model="fileForm">
                <el-form-item label="上传文件" label-width="80px">
                    <el-upload
                            ref="upload"
                            action="http://localhost:18080/file/upload"
                            :limit="1"
                            :file-list="fileList"
                            :data="uploadParams"
                            :on-success="handleUploadSuccess"
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">文件大小不得超过100MB</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="文件描述" label-width="80px">
                    <el-input type="textarea" v-model="fileForm.description" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUpload">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { serverIp, serverPort } from "../../public/config";

    export default {
        name: "File",
        data () {
            return {
                // 用户信息
                user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : null,
                // 文件上传
                fileList: [],
                fileForm: {},
                uploadParams: {},
                dialogFormVisible: false,
                // 分页控件
                pageNumber: 1,
                pageSize: 5,
                total: 0,
                name: '',
                uploader: '',
                // 表格数据
                tableData: [],
                multipleSelection: []
            }
        },
        created () {
            this.load()
        },
        methods: {
            // 分页加载
            load () {
                this.request.get('/file/page', {
                    params: {
                        pageNumber: this.pageNumber,
                        pageSize: this.pageSize,
                        name: this.name,
                        uploader: this.uploader,
                    }
                }).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNumber) {
                this.pageNumber = pageNumber
                this.load()
            },
            reset () {
                this.name = ''
                this.uploader = ''
                this.load()
            },
            // 上传文件
            handleUpload () {
                this.fileList = []
                this.fileForm = {}
                this.dialogFormVisible = true
            },
            submitUpload () {
                // 设置上传额外参数
                this.uploadParams.description = this.fileForm.description
                this.uploadParams.uploader = this.user.userName
                this.$refs.upload.submit()
                this.dialogFormVisible = false
            },
            handleUploadSuccess () {
                this.fileList = []
                this.$message.success('文件上传成功!')
                this.load()
            },
            // 查看文件详情信息
            handleDetail (id) {
                this.$router.push({path: '/filedetails',
                                   query: {id: id}
                                  })
            },
            // 删除
            handleDelete (id) {
                this.request.delete('/file/' + id).then(res => {
                    if (res.code === '200') {
                        this.$message.success('删除成功!')
                        this.load()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            handleBatchDelete () {
                let ids = this.multipleSelection.map(v => v.id)
                this.request.post('/file/del/batch', ids).then(res => {
                    if (res.code === '200') {
                        this.$message.success('批量删除成功!')
                        this.load()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            handleSelectionChange (val) {
                this.multipleSelection = val
            }
        }
    }
</script>

<style scoped>
    div.tool-rows {
        margin: 16px 0;
    }
    .table-input{
        display: inline-block;
        margin-right: 15px;
        width: 200px;
    }
    /deep/ div.el-dialog__body {
       padding-bottom: 10px !important;
    }
    /deep/ .table-header {
        background-color: #E4E4E4 !important;
    }
    /deep/ .edit-dialog {
        border-radius: 12px !important;
    }
</style>